<template>
  <el-dialog
      top="10vh"
      width="800px"
      title="添加/编辑青年驿站申请"
      :visible.sync="dialogValue"
      :close-on-click-modal="false"
      append-to-body
  >
    <SubmitForm
        :rule-form="ruleForm"
        :rules="rules"
        :form-list="formList"
        @change="handleFormChange"
        @save="onSave"
        @close="dialogValue = false"
    />

  </el-dialog>
</template>

<script>
import {http} from '@/api'

export default {
  name: 'YouthHostelFormAdd',
  data() {
    return {
      apiKey: 'youthHostel',
      dialogValue: false,
      ruleForm: {},
      defaultForm: {
        name: '',
        id_card: '',
        gender: '',
        phone: '',
        graduation_date: '',
        school: '',
        major: '',
        education: '',
        address: '',
        emergency_phone: '',
        check_in_start_date: '',
        check_in_end_date: '',
        purpose: '',
        id_card_front_photo: '',
        id_card_back_photo: '',
        graduation_cert_photo: '',
        degree_cert_photo: '',
        invitation_material_photo: '',
        status: 0,
        review_remark: '',
        reviewer: ''
      },
      rules: {
        name: [{required: true, message: '姓名不能为空'}],
        id_card: [{required: true, message: '身份证号码不能为空'}],
        gender: [{required: true, message: '性别不能为空'}],
        phone: [{required: true, message: '联系电话不能为空'}],
        graduation_date: [{required: true, message: '毕业时间不能为空'}],
        school: [{required: true, message: '毕业院校不能为空'}],
        major: [{required: true, message: '专业不能为空'}],
        education: [{required: true, message: '学历不能为空'}],
        address: [{required: true, message: '常住地址不能为空'}],
        emergency_phone: [{required: true, message: '紧急联系电话不能为空'}],
        check_in_start_date: [{required: true, message: '申请入住开始日期不能为空'}],
        check_in_end_date: [{required: true, message: '申请入住结束日期不能为空'}],
        purpose: [{required: true, message: '申请入住事由不能为空'}],
        id_card_front_photo: [{required: true, message: '身份证正面照片不能为空'}],
        id_card_back_photo: [{required: true, message: '身份证反面照片不能为空'}],
        graduation_cert_photo: [{required: true, message: '毕业证书或教育部学历证书电子注册备案表不能为空'}],
        invitation_material_photo: [{required: true, message: '在企业求职面试现场照片不能为空'}]
      },
      formList: [
        {
          label: '姓名',
          prop: 'name',
          name: 'input',
          colSpan: 12,
          placeholder: '请输入姓名'
        },
        {
          label: '性别',
          prop: 'gender',
          name: 'select',
          colSpan: 12,
          options: [
            { value: '男', label: '男' },
            { value: '女', label: '女' }
          ]
        },
        {
          label: '身份证号码',
          prop: 'id_card',
          name: 'input',
          colSpan: 12,
          placeholder: '请输入18位身份证号码'
        },
        {
          label: '联系电话',
          prop: 'phone',
          name: 'input',
          colSpan: 12,
          placeholder: '请输入联系电话'
        },
        {
          label: '毕业时间',
          prop: 'graduation_date',
          name: 'date',
          colSpan: 12,
          placeholder: '请选择毕业时间'
        },
        {
          label: '毕业院校',
          prop: 'school',
          name: 'input',
          colSpan: 12,
          placeholder: '请输入毕业院校'
        },
        {
          label: '专业',
          prop: 'major',
          name: 'input',
          colSpan: 12,
          placeholder: '请输入专业'
        },
        {
          label: '学历',
          prop: 'education',
          name: 'select',
          colSpan: 12,
          options: [
            { value: '高中', label: '高中' },
            { value: '中专', label: '中专' },
            { value: '大专', label: '大专' },
            { value: '本科', label: '本科' },
            { value: '硕士', label: '硕士' },
            { value: '博士', label: '博士' }
          ]
        },
        {
          label: '常住地址',
          prop: 'address',
          name: 'textarea',
          colSpan: 24,
          placeholder: '请输入常住地址',
          rows: 3
        },
        {
          label: '紧急联系电话',
          prop: 'emergency_phone',
          name: 'input',
          colSpan: 12,
          placeholder: '请输入紧急联系电话'
        },
        {
          label: '申请入住开始日期',
          prop: 'check_in_start_date',
          name: 'date',
          colSpan: 12,
          placeholder: '请选择申请入住开始日期'
        },
        {
          label: '申请入住结束日期',
          prop: 'check_in_end_date',
          name: 'date',
          colSpan: 12,
          placeholder: '请选择申请入住结束日期'
        },
        {
          label: '申请入住事由',
          prop: 'purpose',
          name: 'textarea',
          colSpan: 24,
          placeholder: '请详细说明申请入住事由',
          rows: 4
        },
        {
          label: '身份证正面照片',
          prop: 'id_card_front_photo',
          name: 'file',
          multiple: true,
          colSpan: 12,
          accept: 'image/*',
        },
        {
          label: '身份证反面照片',
          prop: 'id_card_back_photo',
          name: 'file',
          multiple: true,
          colSpan: 12,
          accept: 'image/*',
        },
        {
          label: '毕业证书或教育部学历证书电子注册备案表',
          prop: 'graduation_cert_photo',
          name: 'file',
          multiple: true,
          colSpan: 12,
          accept: 'image/*',
        },
        {
          label: '学位证照片',
          prop: 'degree_cert_photo',
          name: 'file',
          multiple: true,
          colSpan: 12,
          accept: 'image/*',
        },
        {
          label: '在企业求职面试现场照片',
          prop: 'invitation_material_photo',
          name: 'file',
          multiple: true,
          colSpan: 12,
          accept: 'image/*',
        },
        {
          label: '审核状态',
          prop: 'status',
          name: 'select',
          colSpan: 12,
          options: [
            { value: 0, label: '待审核' },
            { value: 1, label: '审核通过' },
            { value: 2, label: '审核拒绝' }
          ]
        },
        {
          label: '审核备注',
          prop: 'review_remark',
          name: 'textarea',
          colSpan: 24,
          placeholder: '请输入审核备注',
          rows: 3
        },
        {
          label: '审核人',
          prop: 'reviewer',
          name: 'input',
          colSpan: 12,
          placeholder: '请输入审核人'
        }
      ]
    }
  },
  methods: {
    handleFormChange({key, val}) {
      // 处理表单变化
    },
    open(row) {
      this.dialogValue = true
      if (row) {
        http[this.apiKey].read(row.id).then(res => {
          this.ruleForm = {
            ...res.data,
          }
        })
      } else {
        this.ruleForm = {
          ...this.defaultForm
        }
      }
    },
    onSave() {
      http[this.apiKey][this.ruleForm.id ? 'update' : 'create'](this.ruleForm.id, {
        ...this.ruleForm,
      }).then(res => {
        this.$message.success('操作成功')
        this.dialogValue = false
        this.$emit('get-page')
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
